/*
 * @Author: C.
 * @Date: 2021-03-24 14:02:58
 * @LastEditTime: 2021-12-22 10:41:37
 * @Description: file content
 */

/**
 * @description: 开启flex定位 默认水平垂直居中
 * @param {*} $jc justify-content 主轴排列方式
 * @param {*} $ai align-items 副轴排列方式
 * @param {*} $ff flex-flow 主轴方向
 */
@mixin flexBox($jc: center, $ai: center, $ff: row) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
  flex-flow: $ff;
}

/**
 * @description: 文本超出 显示省略号 
 *在flex作用于下 会失效 所以使用时 请确保不被flex布局影响 或者 在元素外套一层dom结构
 */

@mixin ellipsis($line: null) {
  @if ($line) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  } @else {
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  overflow: hidden;
}

/**
 * @description: 线性渐变色
 * @param {*} $direction 变色方向
 * @param {*} $c1 开始颜色
 * @param {*} $c2 结束颜色
 * 两种比较好看的渐变色
 *background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);        
 *background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
 */
@mixin linerGradient($direction: -90deg, $c1: #29bdd9, $c2: #276ace) {
  background: linear-gradient($direction, $c1 0%, $c2 100%);
}

/**
 * @description: ios底部小黑条适配
 */
@mixin iosBottom {
  /*兼容 IOS<11.2*/
  padding-bottom: constant(safe-area-inset-bottom);
  /*兼容 IOS>11.2*/
  padding-bottom: env(safe-area-inset-bottom);
}
